<template>
  <div class="size-18.75rem">
    <div class="text-1.562rem font-600 text-[#333333] text-center mb-1.875rem">
      <p>非物质文化遗产</p>
      <p>登录查看更多</p>
    </div>
    <a-form :model="formData" layout="vertical" @submit="handleSubmit">
      <a-form-item field="name" label="账号">
        <a-input v-model="formData.userAccount" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item field="post" label="密码">
        <a-input type="password" v-model="formData.userPassword" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item>
        <a-row justify="space-between" class="w-full">
          <a-button class="w-40%" html-type="submit" type="primary">登录</a-button>
          <a-button class="w-40%" href="/user/register">注册</a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import type { UserLoginRequest } from '@/servers'
//@ts-ignore
import { useUserStore } from '@/stores'
import { reactive } from 'vue'
const userStore = useUserStore()
const formData: UserLoginRequest = reactive({
  userAccount: 'lanxiu',
  userPassword: '12345678',
})

const handleSubmit = async (data: any) => {
  await userStore.login(data.values)
}
</script>

<style></style>
